<style>
.toolBar {
  margin-bottom: 10px;
}

.ivu-dropdown {
  margin: 0px;
}

.tCheck {
  padding-left: 10px;
  float: left;
  clear: left;
  z-index: 9999;
}
</style>
<template>
  <Row :loading="spinShow">
    <Row class="toolBar" justify="space-between">
      <Col span="8">
      <Button-group>
        <Tooltip v-if="add" content="添加" placement="bottom-start">
          <Button type="ghost" @click="addClick()">
            <Icon type="plus"></Icon>
          </Button>
        </Tooltip>
        <Tooltip v-if="delCheck" content="删除所选" placement="bottom-start">
          <Button type="ghost" @click="delCheckClick()">
            <Icon type="trash-a"></Icon>
          </Button>
        </Tooltip>
        <Tooltip v-if="assign" content="分配资源" placement="bottom-start">
          <Button type="ghost" @click="assignClick()">
            <Icon type="person-add"></Icon>
          </Button>
        </Tooltip>
        <Tooltip v-if="reset" content="重置密码" placement="bottom-start">
          <Button type="ghost" @click="resetClick()">
            <Icon type="refresh"></Icon>
          </Button>
        </Tooltip>
      </Button-group>
      </Col>
      <Col span="16">
      <Tooltip content="查询" placement="bottom-start" style="float: right;">
        <Button type="ghost" @click="search">
          <Icon type="ios-search-strong"></Icon>
        </Button>
      </Tooltip>
      <Input v-model="searchKey" ref="searchtxt" icon="ios-search-strong" 
      placeholder="请输入..." 
      @on-enter="search" style="width:200px;float:right;">
      </Input>
  
      <Button-group style="float: right;">
        <Tooltip content="刷新" placement="bottom-start">
          <Button type="ghost" @click="refresh">
            <Icon type="loop"></Icon>
          </Button>
        </Tooltip>
        <Tooltip content="导出全部数据" placement="bottom-start">
          <Button type="ghost" @click="exportData(1)">
            <Icon type="arrow-down-a"></Icon>
          </Button>
        </Tooltip>
        <Tooltip content="导出当前页数据" placement="bottom-start">
          <Button type="ghost" @click="exportData(2)">
            <Icon type="ios-download-outline"></Icon>
          </Button>
        </Tooltip>
      </Button-group>
  
      </Col>
    </Row>
    <Table 
    :context="self" border stripe 
    :columns="columns" 
    :data="curTableData" 
     :loading="loading"
    ref="table" 
    @on-selection-change="selectRow" 
    @on-sort-change="sortOrder"
    @on-row-dblclick="show">
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page 
        :total="totals" 
        :current="current" 
        :pageSize="pageSize" 
        :page-size-opts="pageSizeOpts" 
        @on-change="changePage" 
        @on-page-size-change="changeSize" 
        show-elevator 
        show-total 
        show-sizer></Page>
      </div>
    </div>
    <Modal v-show="dataShow" title="查看数据详细信息" v-model="showData" class="editm">
      <Form ref="showForm" :model="showItem" :label-width="80">
        <Form-item v-for="(val, key)  in showItem" :label="key" :key="key">
          <Input :value="val" disabled :icon="key==='Logo'? val:''"></Input>
        </Form-item>
      </Form>
    </Modal>
  
  </Row>
</template>
<script>
import api from '@/api'
import { inputString } from '@/common/utils'
export default {
  data() {
    return {
      self: this,
      current: 1,
      pageSize: 10,
      total: this.totals,
      searchKey: '',
      sortby: [],
      order: [],
      spinShow: false,
      showData: false,
      showItem: {},
      pageSizeOpts: [10, 20, 50, 100],
      selectRows: [],//选择的数据
    }
  },
  props: {
    loading:false,
    dataAll: {
      type: Array,
      default() {
        return [];
      }
    },
    totals: {
      type: Number
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    dataShow: {
      type: Boolean,
      default() {
        return false;
      }
    },
    add: {
      type: Boolean,
      default() {
        return false;
      }
    },
    delCheck: {
      type: Boolean,
      default() {
        return false;
      }
    },
    assign: {
      type: Boolean,
      default() {
        return false;
      }
    },
    reset: {
      type: Boolean,
      default() {
        return false;
      }
    },
    check: {
      type: Boolean,
      default() {
        return false;
      }
    },
    op: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  computed: {
    //        过滤数据表
        //      当前表数据
    curTableData() {
      // console.log(this.columns)
      if (!this.dataAll){
        return []
      }
      return this.dataAll
    },
   pagedata() {
     return {
        pagesize: this.pageSize,
        page: this.current,
        searchKey: this.searchKey,
        sortby: this.sortby,
        order: this.order
      }
      }
  },
  // watch: {},
  methods: {
    //        刷新数据
    refresh() {
      this.searchKey=""
      this.$emit('refresh')

    },
    //        选择数据
    selectRow(selection) {
      this.selectRows = selection
    },
    //      改变页码大小
    changeSize(current) {
      this.pageSize = current
      
      this.$emit('changePage', this.pagedata)
    },
    //      改变页码
    changePage(current) {
      this.current = current

      this.$emit('changePage', this.pagedata)
    },
    // 查询
    search() {
      this.$emit('search', this.pagedata)
    },
    // 排序
    sortOrder(data) {
      console.log(data)
      console.log(this.pagedata)
      // if (this.pagedata.sortby.indexOf(data.key) > -1) {
        this.pagedata.sortby=[data.key]
        this.pagedata.order=[data.order]
        console.log(this.pagedata)
        this.$emit('sortOrder', this.pagedata)
      // }
    },
    //      导出数据1为原始数据，2为当前数据
    exportData(type) {
      if (type === 1) {
        let all={
          pagesize: -1,
          page: 1,
          searchKey: "",
          sortby: this.sortby,
          order: this.order
        }
        this.$emit('search', all)
        setTimeout(() => {
          this.$refs.table.exportCsv({
            filename: '原始数据',
            //            columns: this.columns.filter((col, index) => index < 5),
            //            data: this.dataAll,
          })
                  this.search()
        }, 1500)
      } else if (type === 2) {
        this.$refs.table.exportCsv({
          filename: '排序和过滤后的数据',
          original: false
        })
      }
    },
    //      显示详细记录
    show(row) {
      this.showItem = row
      this.showData = true
    },
    //      编辑表格数据
    edit(index) {
            console.log(index)
            console.log(this.dataAll)
      this.$emit('edit', this.dataAll[index])
    },
    //      新增
    addClick() {
      this.$emit('add')
    },
    //      授权
    assignClick() {
      let list = []
      for (let i = 0; i < this.selectRows.length; i++) {
        list.push(this.selectRows[i].Id)
      }
      this.$emit('assign', list)
    },
    //      重置
    resetClick() {
      let list = []
      for (let i = 0; i < this.selectRows.length; i++) {
        list.push(this.selectRows[i].Id)
      }
      this.$emit('reset', list)
    },
    //      删除所选确认
    delCheckClick() {
      this.$Modal.confirm({
        title: '删除确认',
        content: '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
        '<p>是否继续删除？</p>',
        onOk: () => {
          this.delList(this.selectRows)
        },
        onCancel: () => {
        }
      })
    },
    //      删除所选
    delList(rows) {
      let list = []
      for (let i = 0; i < rows.length; i++) {
        list.push(rows[i].Id)
      }
      this.$emit('delCheck', list)
    },
    //      删除确认
    remove(index) {
      this.$Modal.confirm({
        title: '删除确认',
        content: '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
        '<p>是否继续删除？</p>',
        onOk: () => {
          this.del(index)
        },
        onCancel: () => {
        }
      })
    },
    //      删除
    del(id) {
      this.$emit('del', this.curTableData[id])
    },

  },
  mounted() {
    //修改删除操作按钮
    if (this.op) {
      let op = {
        title: '操作',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.edit(params.index)
                }
              }
            }, '修改'),
            h('Button', {
              props: {
                type: 'error',
                size: 'small'
              },
              on: {
                click: () => {
                  this.remove(params.index)
                }
              }
            }, '删除')
          ]);
        }
      }
      this.columns.push(op)
    }

    //多选框
    if (this.check) {
      let ck = {
        type: 'selection',
        width: 60,
        align: 'center'
      }
      this.columns.unshift(ck)
    }
    //      this.getall()
  }
}
</script>

